import React,{useEffect} from 'react'
import { Button, Card, Toast } from 'antd-mobile'
import { useAppDispatch, useAppSelector, type RootState } from '../../store/store'
import { fetchHomepageData, resetHomepageState } from '../../store/homepageSlice';
import styles from'./doctor.module.scss'
const Doctor = () => {
     const dispatch = useAppDispatch()
    const { data, isLoading, error } = useAppSelector((state: RootState) => state.homepage)
    useEffect(() => {
        dispatch(fetchHomepageData())
        return () => {
            dispatch(resetHomepageState())
        }

    }, [dispatch])
  return (
   <div className={styles.doctbox}>
              <Card title='精选医生' >
                <div className={styles.doctor}>
                    {data?.strictly_selected_doctor?.doctors.map((item) => {
                        const doctor = item.doctor_info;
                        return (
                            <div key={doctor.doctor_id} className={styles.doctor_card}>
                                {/* 医生信息渲染 */}
                                <img src={doctor.image} alt={doctor.name} />
                                <div className={styles.doctor_info}>
                                    <h3>{doctor.name}</h3>
                                    <p>{doctor.title}.{doctor.clinic_name}</p>
                                    <p>{doctor.hospital_name}</p>
                                    <div className={styles.hospital_tags}>
                                        {doctor.hospital_name
                                            && (
                                                <span className={`${styles.tag} ${styles.triple}`}>三甲</span>
                                            )}
                                        {doctor.hospital_tag_text && (
                                            <span className={`${styles.tag} ${styles.top}`}>百强医院</span>
                                        )}

                                    </div>
                                </div>
                                <p></p>

                            </div>
                        );
                    })} 
                    </div>
                </Card>   
            </div>

  )
}

export default Doctor
